<template>
	<view>
		<u-cell-item label="一级经销商" :arrow="false" required>
			<u-input
				:disabled="readonly"
				placeholder="请选择一级经销商"
				:value="FirstDealer && FirstDealer.label"
				inputAlign="right"
				type="select"
				:selectOpen="showFirstDealerPicker"
				@tap="handleInputTap(1)"
			></u-input>
		</u-cell-item>
		<u-cell-item v-if="showSecond" label="二级经销商" :arrow="false" required>
			<u-input
				:disabled="readonly"
				placeholder="请选择二级经销商"
				:value="DoubleDealer && DoubleDealer.label"
				inputAlign="right"
				type="select"
				:selectOpen="showDoubleDealerPicker"
				@tap="handleInputTap(2)"
			></u-input>
		</u-cell-item>
		<u-cell-item v-if="showStore" label="门店" :arrow="false">
			<u-input
				:disabled="readonly"
				placeholder="请选择门店"
				:value="StoreDealer && StoreDealer.label"
				inputAlign="right"
				type="select"
				:selectOpen="showStoreDealerPicker"
				@tap="handleInputTap(3)"
			></u-input>
		</u-cell-item>
		
		
		<u-select
			@confirm="onPickerChange($event, 1)"
			:default-value="[FirstDealerIndex]"
			v-model="showFirstDealerPicker"
			:list="FirstDealerList"
			label-name="Value"
			value-name="Key"
			safe-area-inset-bottom
		></u-select>
		<u-select
			@confirm="onPickerChange($event, 2)"
			:default-value="[DoubleDealerIndex]"
			v-model="showDoubleDealerPicker"
			:list="DoubleDealerList"
			label-name="Value"
			value-name="Key"
			safe-area-inset-bottom
		></u-select>
		<u-select
			@confirm="onPickerChange($event, 3)"
			:default-value="[StoreDealerIndex]"
			v-model="showStoreDealerPicker"
			:list="StoreDealerList"
			label-name="Value"
			value-name="Key"
			safe-area-inset-bottom
		></u-select>
	</view>
</template>

<script>
	export default {
		name:"dealer-select",
		props: {
			showStore: {
				type: Boolean,
				default: true
			},
			showSecond: {
				type: Boolean,
				default: true
			},
			FirstDealerId: {
				type: [String, Number],
				default: '',
			},
			SecondDealerId: {
				type: [String, Number],
				default: '',
			},
			StoreDealerId: {
				type: [String, Number],
				default: '',
			},
			readonly: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				FirstDealer: {},
				DoubleDealer: {},
				StoreDealer: {},
				
				isInit: false,
				
				showFirstDealerPicker: false,
				showDoubleDealerPicker: false,
				showStoreDealerPicker: false,
				
				FirstDealerList: [],
				DoubleDealerList: [],
				StoreDealerList: [],
				
				FirstDealerIndex: -1,
				DoubleDealerIndex: -1,
				StoreDealerIndex: -1,
				
				form: {
					FirstDealerId: '',
					FirstDealerName: '',
					
					SecondDealerId: '',
					SecondDealerName: '',
					
					StoreDealerId: '',
					StoreDealerName: '',
				}
			};
		},
		
		created() {
			this.isInit = true;
			this.getFirstDealerList()
		},
		
		methods: {
			
			handleInputTap(level) {
				
				if(this.readonly) {
					return false;
				}
				
				if(level == 1) {
					this.showFirstDealerPicker = true
				}else if(level == 2) {
					this.showDoubleDealerPicker = true
				}else if(level == 3) {
					this.showStoreDealerPicker = true
				}
				
			},
						
			onPickerChange(e, level) {
				this.isInit = false;
				let dealerList = [];
				let dealer = {};
				let dealerIndex = -1;
				if (level == 1) {
					dealerList = this.FirstDealerList;
					dealer = this.FirstDealer;
					dealerIndex = this.FirstDealerIndex;
				} else if (level == 2) {
					dealerList = this.DoubleDealerList;
					dealer = this.DoubleDealer;
					dealerIndex = this.DoubleDealerIndex;
				} else if (level == 3) {
					dealerList = this.StoreDealerList;
					dealer = this.StoreDealer;
					dealerIndex = this.StoreDealerIndex;
				}
			
				if (!e[0].value || !e[0].label) {
					if (dealerList.length > 0) {
						dealer.value = dealerList[0].Key;
						dealer.label = dealerList[0].Value;
					} else {
						return false;
					}
				} else {
					dealer = e[0];
				}
			
				dealerIndex = dealerList.findIndex(item => item.Key == dealer.value);
			
				if (level == 1) {
					this.FirstDealer = dealer;
					this.FirstDealerIndex = dealerIndex;
					this.form.FirstDealerId = dealer.value;
					this.form.FirstDealerName = dealer.label;
			
					this.initDoubleDealer(dealer);
					this.StoreDealer = {};
					this.StoreDealerIndex = -1;
					this.StoreDealerList = [];
					
					this.$emit('first-change', this.form.FirstDealerId, this.form.FirstDealerName );
				} else if (level == 2) {
					this.DoubleDealer = dealer;
					this.DoubleDealerIndex = dealerIndex;
					this.form.SecondDealerId = dealer.value;
					this.form.SecondDealerName = dealer.label;
			
					this.initStoreDealer(dealer);
					
					this.$emit('second-change', {
						firstDealerId: this.form.FirstDealerId,
						secondDealerId: this.form.SecondDealerId
					})
				} else if (level == 3) {
					this.StoreDealer = dealer;
					this.StoreDealerIndex = dealerIndex;
					this.form.StoreDealerId = dealer.value;
					this.form.StoreDealerName = dealer.label;
					
					this.$emit('change', this.form.StoreDealerId, {
						FirstDealerId: this.form.FirstDealerId,
						SecondDealerId: this.form.SecondDealerId
					})
				}
			},
			
			getFirstDealerList() {
				this.$u.api
					.getDealerDic({
						Level: 1
					})
					.then(res => {
						const { ResultCode, DealerList } = res;
						if (ResultCode === 1) {
							this.FirstDealerList = DealerList;
							
							if(this.FirstDealerId && this.isInit) {
								this.form.FirstDealerId = this.FirstDealerId;
								this.FirstDealerIndex = this.FirstDealerList.findIndex(item => item.Key == this.FirstDealerId);
								if(this.FirstDealerIndex > -1) {
									this.FirstDealer = {
										label: this.FirstDealerList[this.FirstDealerIndex].Value,
										key: this.FirstDealerList[this.FirstDealerIndex].Key
									}
								}
								this.getDoubleDealerList(this.FirstDealerId)
							}
						}
					});
			},
			
			initDoubleDealer(dealer) {
				this.DoubleDealer = {};
				this.DoubleDealerIndex = -1;
				this.DoubleDealerList = [];
				this.getDoubleDealerList(dealer.value);
			},
			
			initStoreDealer(dealer) {
				this.StoreDealer = {};
				this.StoreDealerIndex = -1;
				this.StoreDealerList = [];
				this.getStoreDealerList(dealer.value);
			},
			
			getDoubleDealerList(parentId) {
				this.$u.api
					.getDealerDic({
						Level: 2,
						ParentId: parentId
					})
					.then(res => {
						const { ResultCode, DealerList } = res;
						if (ResultCode === 1) {
							this.DoubleDealerList = DealerList;
							
							if(this.SecondDealerId && this.isInit) {
								this.form.SecondDealerId = this.SecondDealerId;
								this.DoubleDealerIndex = this.DoubleDealerList.findIndex(item => item.Key == this.SecondDealerId);
								if(this.DoubleDealerIndex > -1) {
									this.DoubleDealer = {
										label: this.DoubleDealerList[this.DoubleDealerIndex].Value,
										key: this.DoubleDealerList[this.DoubleDealerIndex].Key
									}
								}
								
								
								this.getStoreDealerList(this.SecondDealerId)
							}
						}
					});
			},
			
			getStoreDealerList(parentId) {
				this.$u.api
					.getDealerDic({
						Level: 3,
						ParentId: parentId
					})
					.then(res => {
						const { ResultCode, DealerList } = res;
						if (ResultCode === 1) {
							this.StoreDealerList = DealerList;
							
							if(this.StoreDealerId && this.isInit) {
								this.form.StoreDealerId = this.StoreDealerId;
								this.StoreDealerIndex = this.StoreDealerList.findIndex(item => item.Key == this.StoreDealerId);
								if(this.StoreDealerIndex > -1) {
									this.StoreDealer = {
										label: this.StoreDealerList[this.StoreDealerIndex].Value,
										key: this.StoreDealerList[this.StoreDealerIndex].Key
									}
								}
								
							}
						}
					});
			},
			
		}
	}
</script>

<style lang="scss">

</style>